<template>
    <div class="section">
<!--        <div>-->
<!--            <img src="./images/banner.jpg" width="100%">-->
<!--        </div>-->
        <div class="view-detail container">
            <div class="view-title">{{info.title}}</div>
            <div class="view-category"><span>分类：{{info.category_name}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                发布时间：{{info.pub_time}}</span>
            </div>
            <div class="view-desc myhtml" v-html="info.content"></div>
        </div>
<!--        <div class="footer">-->
<!--            <div class="container">-->
<!--                &lt;!&ndash; 版权内容请在本组件"内容配置-版权"处填写 &ndash;&gt;-->
<!--                <p>Liberal Arts College of Hunan Normal University &nbsp; 版权所有 湖南师范大学工会<br>-->
<!--                    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;地址：长沙市岳麓区麓山路36号 | 邮编：410081</p>-->
<!--            </div>-->
<!--        </div>-->
    </div>
</template>
<script>
    import news from "@/api/news/index";

    export default {
        name: "ViewDetail",
        data() {
            return {
                id: this.$route.query.id,
                info: {}
            }
        },
        created() {
            this.getDetailNewsById()
        },
        methods: {
            getDetailNewsById() {
                news.getDetailNewsById(this.id).then(res => {
                    this.info = res.data
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    .section {
        position: relative;
        min-height: 500px;
        background: #fff;
    }
    .view-detail {
        padding: 35px 30px 35px 100px;
        min-height: 650px;
        box-sizing: border-box;
        position: relative;

        .view-title {
            font-size: 26px;
            text-align: center;
            color: #333333;
            margin-bottom: 10px;
            font-weight: bold;
        }

        .view-category {
            font-size: 12px;
            color: #9a9a9a;
            width: 100%;
            text-align: center;
            margin-bottom: 22px;
            span{
                padding-bottom: 5px;
                font-size: 14px;
                color: #999;
            }
        }

        .view-desc {
            line-height: 1.8;
            color: #444;
        }
    }
    .footer {
        color: #fff;
        padding: 40px 0;
        background:var(--theme);
        p {
            line-height: 30px;
            text-align: center;
        }
    }
    .container {
        width: 1200px;
        margin: 0 auto;
        position: relative;
    }
</style>
<style lang="scss">
    .view-detail {
        .myhtml{
            table.noBorderTable td, table.noBorderTable th, table.noBorderTable caption {
                border: 1px dashed #ddd !important
            }

            table {
                margin-bottom: 10px;
                border-collapse: collapse;
                display: table;
            }

            td, th {
                padding: 5px 10px;
                border: 1px solid #DDD;
            }

            caption {
                border: 1px dashed #DDD;
                border-bottom: 0;
                padding: 3px;
                text-align: center;
            }

            th {
                border-top: 1px solid #BBB;
                background-color: #F7F7F7;
            }

            table tr.firstRow th {
                border-top-width: 2px;
            }

            .ue-table-interlace-color-single {
                background-color: #fcfcfc;
            }

            .ue-table-interlace-color-double {
                background-color: #f7faff;
            }

            td p {
                margin: 0;
                padding: 0;
            }
        }
    }
</style>
